<template>
    <div class="manageMain">
        <div v-if="memorialList.length > 0">
            <el-card class="info-card" v-for="item in memorialList" :key="item.id" style="margin-bottom: 10px;">
                <div class="info-card-box">
                    <div class="info-header">
                        <div class="info-header-info">
                            <el-image class="memorial-avatar" :src="item.avatar" alt="头像" fit="contain"/>
                            <div class="title">{{ item.name }}纪念馆</div>
                            <el-button size="small" type="info" style="font-family: '宋体';margin-top: 10px;" @click="enterMemorial(item.id)">进入纪念馆</el-button>
                        </div>
                        <div class="memorial-info">
                            <div class="meta">纪念馆编号：{{ item.id }}</div>
                            <div class="meta">建立时间：{{ item.create_time }}</div>
                            <div class="meta">浏览次数：{{ item.visit }}</div>
                            <div class="meta">纪念状态：<span :class="['status', item.is_disable == 0 ? 'yellow' : item.is_disable == 1 ? 'green' : 'red']">{{ item.is_disable == 0 ? '未审核' : item.is_disable == 1 ? '已审核' : '审核驳回' }}</span></div>
                            <div class="meta">纪念馆类别：{{ item.type == 1 ? '普通馆' : item.type == 2 ? '豪华馆' : '尊贵馆' }} （{{ item.is_double == 1 ? '双人' : '单人' }}）</div>

                            <el-button size="small" color="#f39c12" style="font-family: '宋体';margin-top: 10px;color: #ffffff;" @click="upLevel(item.id)">升级纪念馆</el-button>
                        </div>
                    </div>

                    <div class="button-group">
                        <el-button size="small" @click="selectItem(item.id, 'memorialEdit')">修改纪念馆资料</el-button>
                        <el-button size="small" @click="selectItem(item.id, 'graveyardBackground')">墓地设置</el-button>
                        <!-- <el-button size="small" @click="selectItem(item.id, 'memorialBackground')">纪念馆模板设置</el-button> -->
                        <el-button size="small" @click="selectItem(item.id, 'leaveNoteList')">祭奠留言管理</el-button>
                        <el-button size="small" @click="selectItem(item.id, 'articleList')">纪念文章管理</el-button>
                        <el-button size="small" @click="selectItem(item.id, 'albumList')">纪念相册管理</el-button>
                        <!-- <el-button size="small">纪念馆加密</el-button> -->
                        <!-- <el-button size="small">友情链接</el-button> -->
                        <el-button size="small" @click="selectItem(item.id, 'doubleMemorial')">转为双人馆</el-button>
                        <el-button size="small" @click="selectItem(item.id, 'videoList')">纪念视频</el-button>
                        <!-- <el-button size="small">自定义栏目</el-button> -->
                        <!-- <el-button size="small" type="danger">纪念馆亲友（0）</el-button> -->
                        
                    </div>
                </div>
                <div class="button-group-del">
                    <el-button size="small" type="info" link style="font-family: '宋体'" @click="delMemorial(item.id)"> >> 删除纪念馆</el-button>
                </div>
            </el-card>
        </div>
        
        <div v-else>
            <el-empty description="暂无纪念馆"></el-empty>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted } from 'vue'
    import { apiMyMemorialLists, apiMyMuDelete } from '@/api/graveyard'
    import { useRouter } from 'vue-router'
    import { usePaging } from '@/hooks/usePaging';
    import { getRoutePath } from '@/router'
    import feedback from '@/utils/feedback';
    const router = useRouter()

    const memorialList = ref<any>([])


    const { pager, getLists } = usePaging({
        fetchFun: apiMyMemorialLists,
        params: {}
    })

    const getapiMyMemorialLists = async () => {
        const res = await apiMyMemorialLists({})
        console.log(res)
        memorialList.value = res
    }
    // 子传父
    const emit = defineEmits<{
    (e: 'item-selected', itemId: number | string, pathName: string): void;
    }>();
    const selectItem = (id: number | string, pathName: string) => {
        console.log(id)
        let obj = memorialList.value.find((item: any) => item.id == id)

        if(obj.is_disable == 0){
            feedback.msgWarning('未审核，不能操作')
            return
        }
        console.log('项目列表触发选中项目:', id);
        emit('item-selected', id, pathName);
    }
    onMounted(() => {
        getapiMyMemorialLists()
    })

    const enterMemorial = (id: number) => {
        console.log(id)
        // router.push('/memorialDetail' + '?id=' + id)
        
        const targetRouteLocationForButton = {
            name: 'memorialDetail',
            query: { mu_id: id },
        };
        const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
        console.log(resolvedRouteForButton)
        // 使用 window.open 打开新标签页
        window.open(resolvedRouteForButton.href, '_blank');
    }

    const delMemorial = async (id: number) => {
        await feedback.confirm('确定要删除？')
        await apiMyMuDelete({ id })
        getapiMyMemorialLists()
        
    }

    // 升级纪念馆
    const upLevel = async (id: number) => {
        await feedback.confirm('确定要升级？')
        // await apiMyMuDelete({ id })
        // getapiMyMemorialLists()
        selectItem(id, 'upLevel')
    }
</script>
<style scoped>
    .info-card-box{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .info-card {
        padding: 20px;
        
    }
    .info-header {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .memorial-avatar {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
    }
    .memorial-info .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .meta {
        font-size: 14px;
        color: #666;
        margin: 2px 0;
    }
    .status.red {
        color: red;
    }
    .status.green {
        color: green;
    }
    .status.yellow {
        color: #F16C20;
    }
    .highlight {
        color: #f56c6c;
        font-weight: bold;
    }
    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        width: 350px;
    }
    .button-group .el-button{
        width: 120px;
    }
    .button-group .el-button+.el-button{
        margin-left: 0 !important;
    }
    .info-header-info{
        width: 180px;
        height: 150px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: space-between;
    }
    .button-group-del{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }
</style>